﻿@page "/Category"
@using global::UniversityLink.DataModels
@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<LinkContext> DbFactory
@inject NavigationManager Nav
@inject ModalService _modalService
@inject IJSRuntime JS

<PageTitle>全部链接 - 建大Link</PageTitle>

<Modal Title="@("添加/更改链接组")"
       @bind-Visible="@_addModelVisible"
       OnOk="@HandleOk">
    <Form Model="@Model"
          OnFinish="OnFinish"
          @ref="@_form">
        <FormItem Label="名称">
            <Input @bind-Value="@context.Name"/>
        </FormItem>
        <FormItem Label="描述">
            <Input @bind-Value="@context.Description"/>
        </FormItem>
        <FormItem Label="图标">
            <Select Mode="default"
                    Placeholder="Please select"
                    DataSource="@AllIcons"
                    @bind-Value="@context.Icon"
                    ItemValue="s => s.FontClass"
                    ItemLabel="s => s.Name"
                    TItemValue="string"
                    TItem="IconModel"
                    Context="model"
                    ListboxStyle="display:flex;height: 200px;flex-flow: wrap; max-width: 500px; align-content: baseline;"
                    Style="width: 100%; margin-top: 8px;">
                <LabelTemplate>
                    @model.Name
                </LabelTemplate>
                <ItemTemplate Context="m">
                    <IconFont Style="font-size: 32px" Type="@($"icon-{m.FontClass}")"/>
                </ItemTemplate>
                <DropdownRender Context="m">
                    @m
                </DropdownRender>
            </Select>
        </FormItem>
    </Form>
</Modal>

<Modal Title="@("添加/更改Link")"
       @bind-Visible="@_addLinkVisible"
       OnOk="@LinkHandleOk">
    <Form Model="@Link"
          OnFinish="LinkOnFinish"
          @ref="@_linkForm">
        <FormItem Label="名称">
            <Input @bind-Value="@context.Name"/>
        </FormItem>
        <FormItem Label="描述">
            <Input @bind-Value="@context.Description"/>
        </FormItem>
        <FormItem Label="链接">
            <Input @bind-Value="@context.Url"/>
        </FormItem>
        <FormItem Label="图标">
            <Flex>
                <Select Mode="default"
                        Placeholder="Please select"
                        DataSource="@AllIcons"
                        @bind-Value="@context.Icon"
                        ItemValue="s => s.FontClass"
                        ItemLabel="s => s.Name"
                        Context="model"
                        ListboxStyle="display:flex;height: 200px;flex-flow: wrap; max-width: 500px; align-content: baseline;">
                    <LabelTemplate>
                        @model.Name
                    </LabelTemplate>
                    <ItemTemplate Context="m">
                        <IconFont Style="font-size: 32px" Type="@($"icon-{m.FontClass}")"/>
                    </ItemTemplate>
                    <DropdownRender Context="m">
                        @m
                    </DropdownRender>
                </Select>
                <Button Type="@ButtonType.Primary" OnClick="@(() => context.Icon = "")">清空</Button>
            </Flex>
        </FormItem>
    </Form>
</Modal>

<Flex Align="center" Justify="space-around" Style="width: 100%">
    <Flex Gap="10">
        <IconFont Style="font-size: 40px"
                  Type="icon--FileManager"/>
        <Title Level="2">全部标签</Title>
    </Flex>
    <Button Type="@ButtonType.Text" OnClick="ShowModal">
        <IconFont Style="font-size: 22px" Type="icon-tianjia"/>
    </Button>
</Flex>

<Divider/>

<Flex Justify="center" Align="center">
    <GridRow Class="block" Gutter="(30, 24)">
        @foreach (var category in Categories)
        {
            <GridCol Xs="24" Sm="24" Md="12" Lg="12" Xl="12" Xxl="12">
                <div draggable="true" @ondrop="e => OnDrop(e, category)"
                     @ondragstart="e => OnDragStart(e, category)" ondragover="event.preventDefault()">
                    <Card Hoverable Style="border-radius: 10px">
                        <Flex Justify="space-between">
                            <div>
                                <Flex Gap="10">
                                    <IconFont Style="font-size: 40px" Type="@($"icon-{category.Icon}")"/>
                                    <Title Level="2">@category.Name</Title>
                                </Flex>
                                <Paragraph Type="secondary">@category.Description</Paragraph>
                            </div>
                            <Button Type="@ButtonType.Text"
                                    OnClick="@(() => Nav.NavigateTo($"/Links/{category.Key}", true))">
                                <IconFont Style="font-size: 30px" Type="icon-bianji1"/>
                            </Button>
                        </Flex>
                        <GridRow Gutter="(4,4)" Style="margin-bottom: 8px;">
                            @foreach (var link in category.Links)
                            {
                                <GridCol Span="8">
                                    @if (!isWeixin && link.Description == "微信打开")
                                    {
                                        <a @onclick="() => QrCodeModalOpen(link)" target="_blank"
                                           class="a-btn"
                                           title="@link.Description">
                                            <div style="text-align: center">
                                                @if (!string.IsNullOrEmpty(link.Icon))
                                                {
                                                    if (link.Icon.StartsWith("http"))
                                                    {
                                                        <img alt="" src="@link.Icon"
                                                             style="height: 40px;width: 40px;border-radius: 4px"/>
                                                        <div class="btn-description">@link.Name</div>
                                                    }
                                                    else
                                                    {
                                                        <IconFont Style="font-size: 40px"
                                                                  Type="@($"icon-{link.Icon}")"/>
                                                        <div class="btn-description">@link.Name</div>
                                                    }
                                                }
                                                else
                                                {
                                                    <img alt="" src="@GetIcon(link.Url)"
                                                         style="height: 40px;width: 40px;border-radius: 4px"/>
                                                    <div class="btn-description">@link.Name</div>
                                                }
                                            </div>
                                        </a>
                                    }
                                    else
                                    {
                                        <a href="@link.Url" target="_blank"
                                           class="a-btn"
                                           title="@link.Description">
                                            <div style="text-align: center">
                                                @if (!string.IsNullOrEmpty(link.Icon))
                                                {
                                                    if (link.Icon.StartsWith("http"))
                                                    {
                                                        <img alt="" src="@link.Icon"
                                                             style="height: 40px;width: 40px;border-radius: 4px"/>
                                                    }
                                                    else
                                                    {
                                                        <IconFont Style="font-size: 40px"
                                                                  Type="@($"icon-{link.Icon}")"/>
                                                    }
                                                }
                                                else
                                                {
                                                    <img alt="" src="@GetIcon(link.Url)"
                                                         style="height: 40px;width: 40px;border-radius: 4px"/>
                                                }
                                                <div class="btn-description">@link.Name</div>
                                            </div>
                                        </a>
                                    }
                                </GridCol>
                            }
                        </GridRow>
                        @if (category.Links.Count == 0)
                        {
                            <Empty Image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
                                   Style="padding: 20px" Description="@("当前还未添加任何链接")">
                                <ChildContent>
                                    <Button type="@ButtonType.Primary"
                                            OnClick="@(() => ShowLinkModal(key: category.Key))">添加一个
                                    </Button>
                                </ChildContent>
                            </Empty>
                        }
                    </Card>
                </div>
            </GridCol>
        }
    </GridRow>
</Flex>

<style>
    .block {
        width: 80%;
    }

    @@media screen and (max-width: 768px) {
        .block {
            width: 90%;
        }
    }
</style>